<template>
  <view class="gift-vip-card" >
    <uni-popup ref="popup" type="center">
      <view class="gift">
        <view class="user" @click="close">
          <!-- <image v-if="user.parent_avatar_url" class="avatar" mode="aspectFit" :src="user.parent_avatar_url"></image> -->
          <image 
              class="avatar"
              mode="aspectFit"
              src="https://littleshop.oss-cn-beijing.aliyuncs.com/logo.png"
          ></image>
          <view class="desc">
            <!-- <view class="name">{{ user.parent_name ? user.parent_name : '有点东西' }}</view> -->
						<view class="name">张三</view>
            <view class="brief">邀你来逛风速秒</view>
          </view>
        </view>
        <image
            class="button"
            mode="aspectFit"
            src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/user/gift-vip-button.png"
            @click="close"
        ></image>
        <view class="close" @click="close">
          <image
              class="img"
              mode="aspectFit"
              src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/icons/dark-circle-close.png"
          ></image>
        </view>
				<image src="/static/images/popbg.png" class="popbg" mode=""></image>
      </view>
    </uni-popup>

    <!-- <uni-popup ref="coupletpopup" type="center">
      <view class="couplet">
        <view class="sequence">
          <view class="first">第</view>
          <view class="number">{{ sequence }}</view>
          <view class="last">位</view>
        </view>
        <view class="button" @click="enter">查看攻略</view>
      </view>
    </uni-popup> -->
  </view>
</template>

<script>
export default {
  name: "GiftVipCardCom",
  props: ['user'],
  data: () => ({
    sequence: 0
  }),
  methods: {
		show(){
			this.$refs.popup.open('center')
		},
    setSequence() {
      if (this.user.id >= 1000) {
        this.sequence = this.user.id - 1000
      } else {
        this.sequence = this.user.id
      }
    },
    close() {
      this.$refs.popup.close()
      // this.$refs.coupletpopup.open('center')
    },
    enter() {
      this.$refs.coupletpopup.close()
      uni.navigateTo({url: `/packs/one/pages/user/strategy`})
    }
  },
	mounted() {
		// this.$refs.popup.open('center')
	},
  onReady() {
		
    // if (this.user.grade === 'normal') {
    //   this.$refs.popup.open('center')
    //   this.setSequence()
    // }
  }
}
</script>

<style lang="scss" scoped>
.gift-vip-card {
  .gift {
    width: 750rpx;
    height: 1120rpx;
    background-size: 750rpx 1120rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
		position: relative;
		margin-top: -100rpx;
		
		.popbg{
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left:0;
			top:0;
			z-index:-1;
		}
		
		.user {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 320rpx;
			
			.avatar {
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				border: 2rpx solid #EEEEEE;
				margin-right: 20rpx;
			}
			
			.desc {
				
				.name {
					font-size: 28rpx;
					color: #333333;
				}
				
				.brief {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
		
		.button {
			width: 404rpx;
			height: 172rpx;
			margin-top: 260rpx;
			border: none;
			font-size: 32rpx;
			color: #333333;
		}
		
    .close {
      display: flex;
      justify-content: center;
			
      .img {
        display: block;
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 50rpx;
      }
    }
  }
  .couplet {
    width: 714rpx;
    height: 908rpx;
    margin: 0 auto;
    background-size: 714rpx 908rpx;
    background-image: url("https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/user/couplet.png");
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
		
    .sequence {
      margin-top: 430rpx;
      display: flex;
      align-items: center;
      font-weight: 400;
      color: #000000;
			
      .first {
        font-size: 40rpx;
      }
			
      .number {
        margin-left: 20rpx;
        margin-right: 20rpx;
        margin-bottom: 30rpx;
        font-size: 88rpx;
      }
			
      .last {
        font-size: 40rpx;
      }
    }
		
    .button {
      width: 400rpx;
      height: 150rpx;
      line-height: 150rpx;
      color: white;
      font-weight: bold;
      margin-bottom: 30rpx;
      text-align: center;
    }
  }
}
</style>
